<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
</head>
<style>
 body> div{
    width: 200px;
    border:1px solid red;
   text-align: center;
   overflow: hidden;
  }
 div>div{
   width: 50px;
   height: 50px;
     }

 #d1{background-color: yellow ;float: left}
 #d2{background-color: green;float: right }
 #d3{background-color: red;float: left}
 a{
   text-decoration: none;
   color: rosybrown;
 }
 ul{

   list-style-type: none;

   margin:0;
   padding: 0;
 }
 li{
   float:left;
   margin-right: 10px;
 }#d4{
     width: 100%;
     background-color: cyan;
   }
</style>
<body>
<div><div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</div>
<p>这是个p</p>
<div id="d4"><ul>
  <li><a href="">首页</a></li>
  <li><a href="">免费课</a></li>
  <li><a href="">直播课</a></li>
  <li><a href="">精品课</a></li>
  <li><a href="">线上班</a></li>
</ul></div>

</body>
</html>